<template>
	<view>
		<comHeader :config="navConfig"/>
		<!-- 选项卡头部 -->
		<view class="glmoreTabBox">
			<view class="glmoreTab">
				<view 
					v-for="(tab,index) in tabBars" 
					:key="tab.id" 
					:class="tabIndex==index ? 'active' : ''" 
					@click="tapTab(index)">
					{{tab.name}}
				</view>
			</view>
		<view v-if="tabIndex == 1">	
			<view class="search-bar">
				<uni-icon type="search" color="#DBDBDB" size='20' style='margin: 15upx 65upx;'></uni-icon>
				<input placeholder="输入城市名称或者拼音" v-model="searchText" type="text">
			</view>
			<view class="nowadaycity"><text>当前城市</text></view>
			<view class="item" v-for="(item,index) in city1" :key='index' @tap="jumps(index,item)">
				<text class="citytitle">{{item.citytitle}}</text>
				<view class="down">
					<view class="size">
						<text class="map">地图{{item.mapsize}}MB</text>
						<text class="nav">导航{{item.navsize}}MB</text>
					</view>
					<image class="xiazai" src="../../../static/myPic/xiazaiH.png" mode=""></image>
				</view>
				<view class="line"></view>
			</view>
			<view class="nowadaycity"><text>热门城市</text></view>
			<view class="item" v-for="(item,index) in city2" :key='index' @tap="jumps(index,item)">
				<text class="citytitle">{{item.citytitle}}</text>
				<view class="down">
					<view class="size">
						<text class="map">地图{{item.mapsize}}MB</text>
						<text class="nav">导航{{item.navsize}}MB</text>
					</view>
					<image class="xiazai" src="../../../static/myPic/xiazaiL.png" mode=""></image>
				</view>
				<view class="line"></view>
			</view>
			<view class="nowadaycity"><text>全部地区</text></view>
			<view class="item" v-for="(item,index) in city3" :key='index' @tap="jumps(index,item)">
				<text class="citytitle">{{item.citytitle}}</text>
				<!-- <image class="img" src="../../../static/myPic/downSJ.png"></image> -->
				<view class="down">
					<view class="size">
						<text class="map">地图{{item.mapsize}}MB</text>
						<text class="nav">导航{{item.navsize}}MB</text>
					</view>
					<image class="xiazai" src="../../../static/myPic/xiazaiL.png" mode=""></image>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<DownloadGL v-if="tabIndex == 0"/>
	</view>
	</view>
</template>

<script scoped>
	import cityList from '@/pages/my/myOfflineMap/cityList'
	import DownloadGL from '@/pages/my/myOfflineMap/DownloadGL'
	export default {
		components:{
			cityList,
			DownloadGL
		},
		data() {
			return {
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'离线地图'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				curTabIndex: 0,
				tabIndex: 1 ,//默认选中第一个tab
				tabBars: [{
						name: '下载管理'
					},
					{
						name: '城市列表'
					}
				],
				city1:[
					{
						citytitle:'基础功能包',
						mapsize:'12.2',
						navsize:'7.9',
					},
					{
						citytitle:'沈阳市',
						mapsize:'31.3',
						navsize:'7.9',
						
					}
				],
				city2:[
					{
						citytitle:'北京市',
						mapsize:'12.2',
						navsize:'7.9',
					},
					{
						citytitle:'上海市',
						mapsize:'31.3',
						navsize:'7.9',
					},
					{
						citytitle:'深圳市',
						mapsize:'12.2',
						navsize:'7.9',
					},
					{
						citytitle:'广州市',
						mapsize:'31.3',
						navsize:'7.9',
					},
				],
				city3:[
					{
						citytitle:'基础功能包+直辖市',
						mapsize:'12.2',
						navsize:'7.9',
					},
					{
						citytitle:'安徽省',
						mapsize:'12.2',
						navsize:'7.9',
					},
				]
			}
		},
		methods: {
			tapTab(index) {
				this.tabIndex = index;
			},
			actionSheetTap() {
				uni.showActionSheet({
					// title:'标题',
					itemList: ['个人身份证', '企业法人营业执照', '民办非企业单位登记证书', '事业单位法人证书','政府机关统一社会信用代码证书','社会团体法人证书'],
					success: (e) => {
						console.log(e.tapIndex);
						uni.navigateTo({
							url:'/pages/my/join/shopJoin/jingyingWrite'
						})
						uni.showToast({
							// url:'/pages/my/join/shopJoin/jingyingWrite',
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
						
					}
				})
			}
		},
		onLoad(options) {
			this.tabIndex = options.state
		}
	}
</script>

<style>
	/* 头部选项卡 */
	.glmoreTabBox {
		position: relative;
		margin-top: 190upx;
	}
	
	.glmoreTab {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: -82upx;
		margin-bottom: 40upx;
	}
	
	.glmoreTab>view {
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #000000;
		line-height: 54upx;
		position: relative;
	}
	
	.glmoreTab .active {
		/* font-weight: bold; */
		color: #147BFC;
	}
	
	.glmoreTab .active:before {
		content: "";
		width: 102upx;
		height: 3upx;
		background: linear-gradient(left, #8EC6FF, #6592F7);
		display: block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -51upx;
	}
	
	.search-bar{
		width: 745upx;
		height: 60upx;
		border: #F6F6F6 solid 1upx;
		margin-top: 16upx;
		display: flex;
		flex-direction: row;
	}
	.search-bar input{
		width: 340upx;
		height: 45upx;
		display: block;
		margin-top: 6upx;
		font-size: 28upx;
		line-height: 40upx;
	}
	.nowadaycity{
		width: 745upx;
		height: 80upx;
		background: #F6F6F6;
	}
	.nowadaycity text{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #999999;
		margin-left: 40upx;
		margin-top: 20upx;
		position: absolute;
	}
	.item{
		display: flex;
		flex-direction:column;/*控制方向 --*/
		justify-content:flex-start; /*对齐方式*/
		/* align-items:center;/*行高*/ 
	}
	.citytitle{
		margin-left: 40upx;
		margin-top: 23upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: rgba(51,51,51,1);
	}
	.img{
		width: 32upx;
		height: 31upx;
		
	}
	.down{
		display: flex;
		flex-direction:row;/*控制方向 --*/
		justify-content:space-between; /*对齐方式*/
		/* align-items:center;/*行高*/ 
	}
	.size{
		display: flex;
		flex-direction:row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
		/* align-items: center;/*行高*/ 
	}
	.size .map{
		margin-left: 40upx;
		margin-top: 22upx;
		font-size: 20upx;
		color: #999999;
	}
	.size .nav{
		margin-left: 60upx;
		margin-top: 22upx;
		font-size: 20upx;
		color: #999999;
	}
	.xiazai{
		margin-right: 43upx;
		margin-top: -10upx;
		width: 32upx;
		height: 31upx;
	}
	.line{
		width: 724upx;
		height: 1upx;
		background: rgba(239,235,235,1);
		margin-left: 14upx;
		margin-top: 18upx;
	}
</style>
